<template>
  <l-data-board v-bind="data" :value="value" @click.native="handleClick"></l-data-board>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: ["data", "isPreview"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["modules"]),
    value() {
      if (this.data.mode == 0) {
        if (this.data.apiCode && this.lr_apiDataSourceData && this.data.dataValueKey) {
          const data = this.lr_apiDataSourceData[this.data.apiCode];
          if (data) {
            return data[0][this.data.dataValueKey];
          }
        }
      } else {
        if (this.data.dataCode && this.lr_dataSourceData && this.data.dataValueKey) {
          const data = this.lr_dataSourceData[this.data.dataCode];
          if (data) {
            return data[0][this.data.dataValueKey];
          }
        }
      }

      return 0;
    },
  },

  mounted() {
    if (this.data.mode == 0) {
      if (this.data.apiCode) {
        this.lr_loadApiDataSourceData(this.data.apiCode, this.data.apiUrl, !!this.isPreview);
      }
    } else {
      if (this.data.dataCode) {
        this.lr_loadDataSourceData(this.data.dataCode, !!this.isPreview);
      }
    }
  },

  methods: {
    handleClick() {
      if (!this.isPreview && this.data.moduleId) {
        const module = this.$deepClone(this.modules.find((t) => t.f_ModuleId == this.data.moduleId));
        if (module) {
          if (this.data.conditionInfo) {
            const code = this.$route.query.src;
            window.$ldparam = `${code}|${this.data.i}`;
            this.$router.$lrRouter.goto(module);
          } else {
            this.$router.$lrRouter.goto(module);
          }
        }
      }
    },
  },
};
</script>
